<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>填写问卷</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/surveypage.css">
</head>

<body>
    <div class="container">
        <div class="survey_card">
        <div class="page">
            <div class="theme_state_label">
                <div class="theme_lable">
                    <label>{{surveys.surveyTheme}}</label>
                </div>
                <div class="border"></div>
                <div class="state_lable">
                    <label>{{surveys.surveyState}}</label>
                </div>
            </div>
            {% for item in questions %}
            <div class="card">
                <div class="pageIndex">
                    <div class="pageIndex-lable">
                        <label>{{item.questionNumber}}.{{item.questionContent}} </label>
                    </div>
                    <input type="text" placeholder="1~10分，10分为最高分" id="score_{{item.questionNumber}}">
                </div>
            </div>
            {% endfor %}
            <div class="btn-css">
                <input class=" btn btn-outline-primary" type="button" value="提交" onclick="submit();window.onbeforeunload = null;">
            </div>
        </div>
</div>
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script>
        var unloadPageTip = function () { return "刷新页面有可能会丢失数据"; };
        window.onbeforeunload = unloadPageTip;
    </script>
    <script>
        function submit() {
            var arr = [];
            var judge = "false";
            for (var i = 1; i <= $(".pageIndex").length; i++) {
                var score = $(`#score_${i}`).val().trim();
                if (isNaN(score)) {
                    alert("请输入1~10的数字")
                    judge = "false"
                    break;
                } else {
                    if (score < 0) {
                        alert("分数不能小于10，请重新评分");
                        judge = "false"
                        break;
                    } else if(score <= 10 && score >= 0){
                        arr.push(score);
                        judge = "true"
                    } else if(score > 10){
                        alert("分数不能大于10，请重新评分")
                        judge = "false"
                        break;
                    }
                }
            }

            if (judge === "true") {
                axios({
                    method: 'post',
                    url: '/question/answer',
                    data: {
                        scoreAll: arr
                    }
                }).then(function (response) {
                    // axios工具下，服务器真正返回的数据在返回对象的data中
                    let res = response.data;
                    if (res.code === 200) {
                        window.location.href = "/success"
                    } else {
                        alert(res.msg);
                    }
                }).catch((err) => {

                });
            } else {
                alert("问卷填写失败");
            }

        }
    </script>
</body>

</html>